<template>
	<scroll-view>
		<view class="goods-content">
			<view :class="['goods-item', `column-${item.style.column}`]" v-for="(dataItem, index) in item.data" :key="index">
				<!-- 单列商品 -->
				<block v-if="item.style.column === 1">
					<SingleGoods :data="dataItem" is-detail />
				</block>
				<!-- 多列商品 -->
				<block v-else>
					<MultipleGoods :data="dataItem" is-detail />
				</block>
			</view>
		</view>
	</scroll-view>
</template>

<script>
import mixin from "../mixin"
import SingleGoods from "./single.vue"
import MultipleGoods from "./multiple.vue"
export default {
	name: "Goods",
	mixins: [mixin],
	components: { SingleGoods , MultipleGoods }
}
</script>

<style lang="scss" scoped>
	.goods-content {
		display: flex;
		flex-wrap: wrap;
	}
	.goods-item {
		box-sizing: border-box;
		padding: 6rpx;
		&.column-1 {
			width: 100%;
		}
		&.column-2 {
			width: 50%;
		}
		&.column-3{
			width: 33.33333%;
		}
	}
</style>